<template>
	<view>
		<view class="wrap" :style="{ width: systemInfo.width + 'px', height: systemInfo.height + 'px', 'background-color': props.bgcolor }">
			<view v-for="(item, index) in skeletonRectListsData.skeletonRectLists" :index="index" :key="index" class="chiaroscuro" :style="{ width: item.width + 'px', height: item.height + 'px', 'background-color': 'rgba(233, 2, 233,1)', position: 'absolute', left: item.left + 'px', top: item.top + 'px' }"> </view>
			<view v-for="(item, index) in skeletonCircleListsData.skeletonCircleLists" :index="index" :key="'info2-' + index" class="chiaroscuro" :style="{ width: item.width + 'px', height: item.height + 'px', 'background-color': 'rgba(233, 2, 233,1)', 'border-radius': '22rpx', position: 'absolute', left: item.left + 'px', top: item.top + 'px' }">
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
// let $emit = defineEmits(["xxx",'']);
import { getDeviceInfo } from '@/utils';

const systemDeviceInfo = getDeviceInfo();
const systemInfo = reactive({
	width: systemDeviceInfo.windowWidth,
	height: systemDeviceInfo.windowHeight,
});

const props = defineProps({
	bgcolor: { type: String, default: '#fff' },
	selector: { type: String, default: 'skeleton' },
});

//绘制背景
const rectBg = () => {
	uni
		.createSelectorQuery()
		.selectAll(`.${props.selector}`)
		.boundingClientRect()
		.exec(function (res) {
			systemInfo.height = res[0][0].height + res[0][0].top || 0;
		});
};

//绘制矩形
const skeletonRectListsData = reactive({
	skeletonRectLists: [],
});
const rectHandle = () => {
	//绘制不带样式的节点
	uni
		.createSelectorQuery()
		.selectAll(`.${props.selector}-rect`)
		.boundingClientRect()
		.exec(function (res) {
			if (res && res.length > 0) skeletonRectListsData.skeletonRectLists = res[0];
		});
};

//绘制圆形
const skeletonCircleListsData = reactive({
	skeletonCircleLists: [],
});
const radiusHandle = () => {
	uni
		.createSelectorQuery()
		.selectAll(`.${props.selector}-radius`)
		.boundingClientRect()
		.exec(function (res) {
			if (res && res.length > 0) skeletonCircleListsData.skeletonCircleLists = res[0];
		});
};

onMounted(() => {
	rectBg();
	rectHandle();
	radiusHandle();
});
</script>

<style lang="scss" scope>
.wrap {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9998;
	overflow: hidden;
}
.chiaroscuro {
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderShimmer;
	animation-timing-function: linear;
	background: #f6f7f8;
	background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
	background-size: 800px 104px;
	height: 40px;
	position: relative;
}
@keyframes placeHolderShimmer {
	0% {
		background-position: -468px 0;
	}
	100% {
		background-position: 468px 0;
	}
}
</style>
